1. props 

作用: 当一个组件,需要组件外部的数据时,可以通过props,将数据传入到组件内部

传递: 
<Test xxx={数据}></Test>

接收: 

函数组件: 
function Test(props){return jsx}

类组件: 
class Test extends React.Component {
    render(){
        this.props
    }
}

props的特点: 
    1. props数据是只读的.不要赋值 
    2. 可以传递任何数据

    <Test ele={<div>123</div>} eleType={Demo} xxx={<Demo />}></Test>

    function Test(props){
        return <div>
            {props.ele}
            <props.eleType></props.eleType>
            {props.xxx}
        </div>
    }

props 校验

    作用: 校验传入到组件中的props数据是否符合要求,如果不符合会在控制台打印一个更新清晰的错误

    使用: 
        1. 引入: import PropTypes from 'prop-types'
        class Test extends React.Component {
            2. 添加静态属性
            static propTypes = {
                yyy: PropTypes.array.isRequired
            }
            render(){
                return jsx
            }
        }

props 默认值
    
class Test extends React.Component {
    static defaultProps = {
        yyy: 默认值
    }
    render(){
        return jsx
    }
}
    

2. 操作表单

操作表单的目的是为了收集表单的数据 

受控组件
其实就是让表单项的值被react数据控制,再配合onchange事件,修改组件state的值,当用户输入的时候,数据就直接存储到了组件的状态中

受控组件指: 一个被react数据控制的表单项

非受控组件: 主要学习在react中如何获取到真实dom

  直接操作dom